<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			hr{
				border: 5px solid black;
			}
			div{
				height: 100px;
				width: 100px;
				color: red;
				background-color: aquamarine;
			}
			div{
				height: 200px;
				width: 200px;
				color: black;
				background-color: aqua;
			}
			
			
			
			
			
			
		</style>
		<title>css样式</title>
	</head>
	<body>
		<img src="./img/css1.png" alt=""><br /><br />
		<img src="./img/css2.png"/><br /><br />
		<br />
		<hr />
		<br />
		1.css层叠性<br />
		概念：<br />
		所谓层叠性是指多种css样式的叠加<br />
		层叠性是浏览器处理冲突的一个能力,<br />
		如果一个属性通过两个相同选择器设置到同一个元素上，<br />
		那么这个时候一个属性就会将另─个属性层叠掉<br />
		<br />
		原则：<br />
		样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。<br />
		样式不冲突，不会层叠<br />
		<img src="./img/css3.png" alt=""><br />
		<img src="img/css4.png"/><br /><br />
		2.css继承性：<br />
		概念：<br />
		1.子标签会继承父标签的某些样式，如文本颜色和字号。<br />
		2.想要设置一个可继承的属性，只需将它应用于父元素即可。<br />
		简单的理解就是:子承父业。<br />
		<br />
		注意：<br />
		1.恰当地使用继承可以简化代码，降低CSS样式的复杂性。<br />
		比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。<br />
		2.子元素可以继承父元素的样式**(text-，font-，line-这些元素开头的可以继承，以及color属性)<br />
		<br />
		<img src="./img/css6.png" alt="">
		<img src="./img/css5.png"/>
		<br /><br>
		
		3.优先级，权重：
	</body>
</html>